<template>
  <div class="NewPage">
    <el-container class="NewPage_index">
      <el-header class="headers">
        <div style="width: 40%">
          <el-page-header @back="goBack"></el-page-header>
        </div>
        <div style="width: 60%; height: 100%">
          <el-menu
            mode="horizontal"
            :default-active="$route.path"
            class="el-menu-demo"
            @select="handleSelect"
            background-color="#ffffff"
            text-color="#000000"
            active-text-color="#0BB278"
          >
            <el-menu-item @click="handleRoute('/AddEmployee')" :index="'/' + 'AddEmployee'"><b>添加员工</b></el-menu-item>
            <el-menu-item @click="handleRoute('AddTobehired')" :index="'/' + 'AddTobehired'"><b>添加待入职</b></el-menu-item>
          </el-menu>
        </div>
      </el-header>
      <el-container class="NewPage_index">
        <el-main class="main">
          <keep-alive>
            <router-view name="newPage" />
          </keep-alive>
        </el-main>
      </el-container>
    </el-container>

  </div>

</template>

<script>
export default {
  name: "NewPage",
  data() {
    return {}
  },
  mounted() {
  },
  methods: {
    handleSelect() {
    },


    //返回
    goBack(){
      this.$router.push({
        path: '/employeeInfo'
      })
    },


    //跳转
    handleRoute(data){
      this.$router.push({
        path: data
      });
    }
  }
}
</script>

<style scoped>

.NewPage {
  width: 100%;
  height: 100%;
}

.NewPage_index {
  width: 100%;
  height: 100%;
  background: #eee !important;
}

</style>
<style>
.NewPage .headers {
  width: 100%;
  /*position: relative;*/
  background-color: white;
  border-radius: 5px;
  box-shadow: 0px 3px 5px #bdbdbd !important;
  display: flex;
  align-items: center;
}

.main {
  height: 100%;
  /*margin: 15px;*/
  width: 100%;
  background-color: #ffffff;
  border-radius: 5px;
  box-shadow: 0px 3px 5px #bdbdbd;
}
.el-menu-demo{
  width: 50%;
  height: 100%;
  margin: 0px;
  border-bottom: solid 0px;
}
</style>
